<template>
	<view class="container">
		<view class="reason-box">
			<view class="title">请选择原因</view>
			<uni-list>
				<uni-list-item :title="item.title" v-for="(item, index) in reason" :key="index" @click.native="clickHandler(index)">
					<template slot="footer">
						<image v-show="item.checkStatu" class="checkedImg" src="/static/checked.png"></image>
					</template>
				</uni-list-item>
			</uni-list>
			<view v-show="showInput">
				<view class="title">详情描述</view>
				<van-field :value="otherContent" type="textarea" placeholder="请详细秒速您姚举报的内容,以便于客服核实情况" show-word-limit max :autosize="{ maxHeight: 100, minHeight: 50 }" :border="false" maxlength="200" />
			</view>			
		</view>
		<view class="btn-box">
			<van-button type="danger" block @click="addComplain">提交</van-button>
		</view>
	</view>
</template>

<script>
	import { complainJob } from '@/api/job.js'
export default {
	data() {
		return {
			jobId:'',
			reason: [
				{
					id:1,
					title: '薪资不真实',
					checkStatu: false
				},
				{
					id:2,
					title: '工作内容或要求不真实',
					checkStatu: false
				},
				{
					id:3,
					title: '企业信息不真实',
					checkStatu: false
				},
				{
					id:4,
					title: '广告、非法、色情内容',
					checkStatu: false
				},
				{
					id:5,
					title: '企业拖欠工资',
					checkStatu: false
				},
				{
					id:6,
					title: '其他',
					checkStatu: false
				}
			],
			showInput: false,
			otherContent: ''
		}
	},
	onLoad(e) {
		if(e)
		{
			this.jobId = e.id
		}
	},
	methods: {
		clickHandler(i) {
			let newReason = this.reason.map((item,index) => {
				let obj = {...item}
				
				if(i !== index)
				{
					obj.checkStatu = false
				}
				else
				{
					if(!obj.checkStatu)
					{
						obj.checkStatu = true
					}
				}
				
				return obj
			})
			this.reason = newReason
			this.showInput = i == 5 ? true: false
		},
		addComplain(){
			if(!this.jobId)
			{
				uni.showToast({
					title:'职位ID不能为空',
					icon:'none'
				})
				return
			}
			let find = this.reason.find(item => item.checkStatu)
			if(!find)
			{
				uni.showToast({
					title:'请选择一个原因!',
					icon:'none'
				})
				return
			}
			complainJob({
				jobid:this.jobId,
				reportid:find.id,
				reporttext:this.otherContent
			}).then(res => {
				uni.showToast({
					title:'举报提交成功!',
					icon:'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				},2000)				
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	::v-deep .van-button--danger {
		background-color: #f4435d;		
	}
</style>
<style lang="scss" scoped>
.container {
	.reason-box {
		.checkedImg {
			width: 30rpx;
			height: 30rpx;
		}
		.title{
			padding: 20rpx 30rpx;
			color: #666666;
		}
	}
	.btn-box{
		margin-top: 30rpx;
		padding: 0 30rpx;
	}
}
</style>
